<template>
  <div class="app-container">

    <el-tabs type="border-card">
      <el-tab-pane label="菜单信息">
        <div>
          <span class="menu-name">{{name}}</span>
          <span>{{pageName}}</span>
        </div>
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item>
            <span slot="label">
              <must /><span>父节点 </span>
            </span>
            <el-input v-model="form.pid" name="父节点" readonly style="width: 60%;" />
          </el-form-item>
          <el-form-item>
            <span slot="label">
              <must /><span>菜单名称 </span>
            </span>
            <el-input v-model="form.name" v-validate="'required'" name="菜单名称" :readonly="isReadonly"
              placeholder="例：用户管理" style="width: 60%;" />
            <span v-show="errors.has('菜单名称')" style="color: red;">{{ errors.first('菜单名称') }}</span>
          </el-form-item>
          <el-form-item>
            <span slot="label">
              <must /><span>标题 </span>
            </span>
            <el-input v-model="form.title" v-validate="'required'" name="标题" :readonly="isReadonly" placeholder="例：用户管理"
              style="width: 60%;" />
            <span v-show="errors.has('标题')" style="color: red;">{{ errors.first('标题') }}</span>
          </el-form-item>
          <el-form-item>
            <span slot="label">
              <must /><span>路径 </span>
            </span>
            <el-input v-model="form.path" v-validate="'required'" name="路径" :readonly="isReadonly"
              placeholder="例：/sys、user" style="width: 60%;" />
            <span v-show="errors.has('路径')" style="color: red;">{{ errors.first('路径') }}</span>
          </el-form-item>
          <el-form-item label="重定向路径">
            <el-input v-model="form.redirect" name="重定向路径" :readonly="isReadonly" placeholder="例：/dashboard"
              style="width: 60%;" />
          </el-form-item>
          <el-form-item>
            <span slot="label">
              <must /><span>前端组件路径 </span>
            </span>
            <el-input v-model="form.component" v-validate="'required'" name="前端组件路径" :readonly="isReadonly"
              placeholder="例：Layout、sys/user/index" style="width: 60%;" />
            <span v-show="errors.has('前端组件路径')" style="color: red;">{{ errors.first('前端组件路径') }}</span>
          </el-form-item>
          <el-row>
            <el-col :span="13">
              <el-form-item label="是否隐藏">
                <el-radio-group v-model="form.hidden" :disabled="isReadonly">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="状态">
                <el-radio-group v-model="form.status" :disabled="isReadonly" name="状态" v-validate="'required'"
                  size="small">
                  <el-radio-button v-for="(val, key) in allDictData.statusOps" :label="key" :key="key">{{val}}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item>
                <span slot="label">
                  <must /><span>图标 </span>
                </span>
                <el-input v-model="form.icon" v-validate="'required'" name="图标" :readonly="isReadonly"
                  placeholder="icon图标名称" style="width: 60%;" />
                <span v-show="errors.has('图标')" style="color: red;">{{ errors.first('图标') }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="排序">
                <el-input v-model="form.orderNum" max="999" type="number" :readonly="isReadonly" style="width: 60%;" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item v-show="!isReadonly">
            <el-button @click="handleSave" :disabled="btnDisabled" type="primary">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <hr />
    <!-- 按钮资源列表 -->
    <el-tabs type="border-card" style="height: 35%;">
      <el-tab-pane label="按钮资源">
        <api-resource ref="apiRef" />
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import {
    addObj,
    putObj,
    getDictData
  } from '@/api/common';

  /* 工具 */
  import * as common from '@/utils/base/common';

  /* 组件 */
  import apiResource from './api/index'

  export default {
    /* 菜单管理 - 信息  */
    name: 'menu-info',
    data() {
      return {
        name: '',
        pageName: '',
        isReadonly: false, // 是否只读
        form: null,
        titles: {
          create: '添加',
          update: '修改',
          search: '查看',
        },
        btnDisabled: false, // 按钮是否禁用
        allDictData: {
          statusOps: [],
        },
      }
    },
    created() {
      this.initData()
    },
    props: ['restPath', 'treeNode', 'baseMenu', 'btnType'],
    watch: {
      baseMenu() {
        this.getApiList() // 获取按钮资源数据
        this.setFormData()
      },
      btnType() {
        this.setBtnType()
      },
    },
    components: {
      apiResource
    },
    methods: {
      initData() {
        this.name = '根节点'
        this.initForm('-1')

        this.getAllDictData()
        this.setBtnType()
      },

      initForm(pid) {
        this.form = {
          pid: pid, // 父节点ID
          hidden: 0,
          status: 1,
          orderNum: 1,
        }
      },

      getAllDictData() {
        const params = {
          dictIds: "STATUS"
        }
        getDictData(params).then(response => {
          this.allDictData.statusOps = response.data.STATUS
        }).catch(err => {
          common.message(this, 'error', 2, '获取数据字典失败!')
          console.error(err)
        })
      },

      // 当前页面状态
      setBtnType() {
        this.$validator.reset() // 重置验证

        this.pageName = this.titles[this.btnType]
        if (this.btnType === 'search') {
          this.isReadonly = true // 只读
        } else {
          this.isReadonly = false
        }
      },

      // 赋值form
      setFormData() {
        this.name = this.treeNode.name // 所选菜单名称

        if (this.baseMenu != null) {
          this.form = this.baseMenu
        } else {
          this.initForm(this.treeNode.id)
        }
      },

      getApiList() {
        this.$refs.apiRef.resetData()
        // 没有子菜单时，去获取列表数据
        if (this.treeNode != null && this.treeNode.children.length == 0 && this.baseMenu != null) {
          this.$refs.apiRef.refreshData(this.baseMenu.id)
        }
      },


      // 防止连续多次请求
      avoidMultRequest(that) {
        // 按钮禁用
        that.btnDisabled = true;
        // 三秒后在解除按钮禁用状态
        setTimeout(function() {
          //解除按钮禁用状态
          that.btnDisabled = false;
        }, 2000);
      },

      /**
       * 点击保存按钮
       */
      handleSave() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            if (this.btnType === 'update') {
              this.updateSave()
            } else {
              this.addSave()
            }
          } else {
            // 防止连续多次请求
            this.avoidMultRequest(this)
            common.message(this, 'warning', 3, '有验证信息没有通过，请查看页面信息是否填写完整或正确！')
          }
        })
      },

      addSave() {
        addObj(this.restPath, this.form).then(response => {
          this.handleRes(response)
        }).catch(err => {
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      updateSave() {
        putObj(this.restPath, this.form).then(response => {
          this.handleRes(response)
        }).catch(err => {
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      // 处理结果
      handleRes(response) {
        if (response.code === 200) {
          common.message(this, 'success', 2, '保存数据成功!')
          this.isReadonly = true // 只读
          this.pageName = '查看'
          this.name = this.form.name
          this.$emit('flushData') // 向父组件提示刷新数据

        } else {
          common.message(this, 'warning', 2, response.message)
        }
      },

    }
  }
</script>

<style scoped>
  .app-container {
    width: 100%;
    height: 100%;
  }

  .menu-name {
    font-weight: bold;
    font-size: 16px;
    color: #1482F0;
  }
</style>
